.marker-icon {
    background-position: center;
    height: 34px;
    width: 20px;
}

.marker {
    height: 30px;
    width: 30px;
}

.marker-content {
    background: #c30b82;
    border-radius: 50% 50% 50% 0;
    height: 30px;
    left: 50%;
    margin: -15px 0 0 -15px;
    position: absolute;
    top: 50%;
    transform: rotate(-45deg);
    width: 30px;
}

    .marker-content::before {
        background: #ffffff;
        border-radius: 50%;
        content: "";
        height: 24px;
        margin: 3px 0 0 3px;
        position: absolute;
        width: 24px;
    }

.deg0 {
    -webkit-transform: translate(2em);
    -moz-transform: translate(2em);
    -ms-transform: translate(2em);
    -o-transform: translate(2em);
    transform: translate(2em);
}
/* 12em = half the width of the wrapper */
.lt-ie9 .deg0 {
    margin-left: 10em;
}

.deg45 {
    -webkit-transform: rotate(45deg) translate(2em) rotate(-45deg);
    -moz-transform: rotate(45deg) translate(2em) rotate(-45deg);
    -ms-transform: rotate(45deg) translate(2em) rotate(-45deg);
    -o-transform: rotate(45deg) translate(2em) rotate(-45deg);
    transform: rotate(45deg) translate(2em) rotate(-45deg);
}

.lt-ie9 .deg45 {
    margin: 6.485em;
}

.deg135 {
    -webkit-transform: rotate(135deg) translate(2em) rotate(-135deg);
    -moz-transform: rotate(135deg) translate(2em) rotate(-135deg);
    -ms-transform: rotate(135deg) translate(2em) rotate(-135deg);
    -o-transform: rotate(135deg) translate(2em) rotate(-135deg);
    transform: rotate(135deg) translate(2em) rotate(-135deg);
}

.lt-ie9 .deg135 {
    margin: 6.485em -10.485em;
}

.deg180 {
    -webkit-transform: translate(-2em);
    -moz-transform: translate(-2em);
    -ms-transform: translate(-2em);
    -o-transform: translate(-2em);
    transform: translate(-2em);
}

.lt-ie9 .deg180 {
    margin-left: -14em;
}

.deg225 {
    -webkit-transform: rotate(225deg) translate(2em) rotate(-225deg);
    -moz-transform: rotate(225deg) translate(2em) rotate(-225deg);
    -ms-transform: rotate(225deg) translate(2em) rotate(-225deg);
    -o-transform: rotate(225deg) translate(2em) rotate(-225deg);
    transform: rotate(225deg) translate(2em) rotate(-225deg);
}

.lt-ie9 .deg225 {
    margin: -10.485em;
}

.deg315 {
    -webkit-transform: rotate(315deg) translate(2em) rotate(-315deg);
    -moz-transform: rotate(315deg) translate(2em) rotate(-315deg);
    -ms-transform: rotate(315deg) translate(2em) rotate(-315deg);
    -o-transform: rotate(315deg) translate(2em) rotate(-315deg);
    transform: rotate(315deg) translate(2em) rotate(-315deg);
}

.lt-ie9 .deg315 {
    margin: -10.485em 6.485em;
}